<template>
    <div class="pageBox">
       <div class="atomicApiDocsMenuBox">
            <div class="atomicApiDocsItem" v-for="functionModuleItem,index in functionModuleData">
                <div class="atomicApiDocsMenuCategory"  @click="functionModuleClick(index)">{{functionModuleItem.fm_name}}（扩展模块）</div>
                <el-collapse-transition>
                <div class="atomicApiDocsMenuContent" v-if="functionModuleItem.isShow">
                    <div class="atomicApiDocsMenuItem" @click="functionModuleItemClick(0,functionModuleItem.fm_id)">原子层接口文档</div>
                    <div class="atomicApiDocsMenuItem" @click="functionModuleItemClick(1,functionModuleItem.fm_id)">聚合层接口文档</div>
                </div>
                </el-collapse-transition>
            </div>
        </div>
        <div class="apiDocsMenuBox">
            <p v-if="apiMenuData.length <= 0" style="padding:10px">没有相应菜单</p>
            <div class="atomicApiDocsItem" v-for="apiMenuItem,index in apiMenuData">
                <div class="atomicApiDocsMenuCategory" @click="apiMenuItemClick(index)">{{apiMenuItem.api_name}}</div>
                <el-collapse-transition>
                <div class="atomicApiDocsMenuContent" v-if="apiMenuItem.isShow">
                    <div class="atomicApiDocsMenuItem" @click="apiDocsMenuItemClick(apiMenuItem.type,apiDocsMenuItem)"  v-for="apiDocsMenuItem in apiMenuItem.apiList">
                        <span v-if="apiMenuItem.type == 0">{{apiDocsMenuItem.ap_name}}</span>
                        <span v-if="apiMenuItem.type == 1">{{apiDocsMenuItem.bad_name}}</span>
                    </div>
                </div>
                </el-collapse-transition>
            </div>
        </div>    
        <div class="atomicApiDocsContentBox">
            <template v-if="apiDocsDetailData == ''">
                <div class="noApiDocsBox">
                    <div class="noApiDocsText"><i class="fa fa-sticky-note-o fa-fw"></i>暂无选择接口</div>
                </div>
            </template>
            <template v-else>

                <div class="apiDocTitleBox"><i class="fa fa-circle fa-fw"></i>接口名称</div>
                <div class="apiDocContentBox" v-if="apiDocsDetailData.type == 0">{{apiDocsDetailData.ap_name}}</div>
                <div class="apiDocContentBox" v-if="apiDocsDetailData.type == 1">{{apiDocsDetailData.bad_name}}</div>
                <div class="apiDocTitleBox"><i class="fa fa-circle fa-fw"></i>接口地址</div>
                <div class="apiDocContentBox" v-if="apiDocsDetailData.type == 0">{{apiDocsDetailData.ap_api}}</div>
                <div class="apiDocContentBox" v-if="apiDocsDetailData.type == 1">{{apiDocsDetailData.bad_api}}</div>
                <div class="apiDocTitleBox"><i class="fa fa-circle fa-fw"></i>请求方式</div>
                <div class="apiDocContentBox" v-if="apiDocsDetailData.type == 0">{{apiDocsDetailData.ap_method}}</div>
                <div class="apiDocContentBox" v-if="apiDocsDetailData.type == 1">{{apiDocsDetailData.bad_method}}</div>
                <div class="apiDocTitleBox"><i class="fa fa-circle fa-fw"></i>接口描述</div>
                <div class="apiDocContentBox" v-if="apiDocsDetailData.type == 0">{{apiDocsDetailData.ap_desc}}</div>
                <div class="apiDocContentBox" v-if="apiDocsDetailData.type == 1">{{apiDocsDetailData.bad_desc}}</div>
                <div class="apiDocTitleBox"><i class="fa fa-circle fa-fw"></i>GET请求参数</div>
                <div class="apiDocRequestBox">
                    <template v-if="apiDocsDetailData.getArr.length > 0">
                        <el-row :key="getRequestItem.id" v-for="getRequestItem in apiDocsDetailData.getArr" style="margin-bottom:0px">
                            
                            <template v-if="apiDocsDetailData.type == 0">
                                <template v-if="getRequestItem.rp_way == 'RESTFUL'">

                                    <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.rp_name}}</div></el-col>
                                    <el-col :span="8"><div class="grid-content bg-purple">{{getRequestItem.rp_note}}</div></el-col>
                                    <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.rp_is_must}}</div></el-col>
                                    <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.rp_type}}</div></el-col>
                                    <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.rp_rule}}</div></el-col>

                                </template>
                            </template>

                            <template v-else-if="apiDocsDetailData.type == 1">
                                <template v-if="getRequestItem.badrp_way == 'RESTFUL'">

                                    <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.badrp_name}}</div></el-col>
                                    <el-col :span="8"><div class="grid-content bg-purple">{{getRequestItem.badrp_note}}</div></el-col>
                                    <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.badrp_is_must}}</div></el-col>
                                    <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.badrp_type}}</div></el-col>      
                                    <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.badrp_rule}}</div></el-col>

                                </template>
                            </template>

                            <template v-else>
                                <el-col :span="24"><div class="grid-content bg-purple">无GET请求参数</div></el-col>
                            </template>  
                        </el-row>    
                    </template>
                    <template v-else>
                        <el-row><el-col :span="24"><div class="grid-content bg-purple">无GET请求参数</div></el-col></el-row>
                    </template>
                </div>
                <div class="apiDocTitleBox"><i class="fa fa-circle fa-fw"></i>POST请求参数</div>
                <div class="apiDocRequestBox">
                    <template v-if="apiDocsDetailData.postArr.length > 0">
                        <el-row :key="getRequestItem.id" v-for="getRequestItem in apiDocsDetailData.postArr" style="margin-bottom:0px">

                            <template v-if="apiDocsDetailData.type == 0">
                                <template v-if="getRequestItem.rp_way == 'BODY'">
                                        <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.rp_name}}</div></el-col>
                                        <el-col :span="8"><div class="grid-content bg-purple">{{getRequestItem.rp_note}}</div></el-col>
                                        <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.rp_is_must}}</div></el-col>
                                        <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.rp_type}}</div></el-col>
                                        <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.rp_rule}}</div></el-col>
                                </template>
                            </template>

                            <template v-else-if="apiDocsDetailData.type == 1">
                                <template v-if="getRequestItem.badrp_way == 'BODY'">
                                        <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.badrp_name}}</div></el-col>
                                        <el-col :span="8"><div class="grid-content bg-purple">{{getRequestItem.badrp_note}}</div></el-col>
                                        <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.badrp_is_must}}</div></el-col>
                                        <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.badrp_type}}</div></el-col>
                                        <el-col :span="4"><div class="grid-content bg-purple">{{getRequestItem.badrp_rule}}</div></el-col>
                                </template>
                            </template>

                            <template v-else>
                                <el-col :span="24"><div class="grid-content bg-purple">无POST请求参数</div></el-col>
                            </template>  
                        </el-row>
                    </template>  
                    <template v-else>
                        <el-row><el-col :span="24"><div class="grid-content bg-purple">无POST请求参数</div></el-col></el-row>
                    </template>  
                </div>
                <div class="apiDocTitleBox"><i class="fa fa-circle fa-fw"></i>返回结果</div>
                <div class="apiDocContentBox" style="padding:0px;margin-right:0px;">
                    <template v-if="apiDocsDetailData.type == 0"><mavon-editor v-model="apiDocsDetailData.ap_response_params" :toolbarsFlag="false" :subfield="false" :editable="false" defaultOpen="preview" :boxShadow="false" :placeholder="placeholder" /></template>
                    <template v-if="apiDocsDetailData.type == 1"><mavon-editor v-model="apiDocsDetailData.bad_response_params" :toolbarsFlag="false" :subfield="false" :editable="false" defaultOpen="preview" :boxShadow="false" :placeholder="placeholder" /></template>
                </div>

            </template>
            
        </div>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                placeholder:" "
            }
        },
        //初始化函数
        mounted() {

            //获取模块信息
            this.$myLoading.startLoading()
            this.$http.getHttp(this.$API.functionModuleSearch + "/fm_is_delete/0/skip/0/limit/1000",rs => {
                this.$myLoading.endLoading()
                rs.data.forEach((item)=>{ item.isShow = false })
                this['ExtFunctionApiDocsListModule/updateFunctionModuleData'](rs.data)
            });

        },
        //计算属性
        computed: {
            ...mapState({ 
                functionModuleData : state => state.ExtFunctionApiDocsListModule.functionModuleData,
                apiMenuData : state => state.ExtFunctionApiDocsListModule.apiMenuData,
                apiDocsDetailData  : state => state.ExtFunctionApiDocsListModule.apiDocsDetailData
           })
        },
        //组件方法
        methods: {
            ...mapMutations(['updateFunctionModuleData','ExtFunctionApiDocsListModule/updateFunctionModuleData']),
            ...mapMutations(['updateFunctionModuleShow','ExtFunctionApiDocsListModule/updateFunctionModuleShow']),
            ...mapMutations(['updateApiMenuData','ExtFunctionApiDocsListModule/updateApiMenuData']),
            ...mapMutations(['updateApiDocsMenuShow','ExtFunctionApiDocsListModule/updateApiDocsMenuShow']),
            ...mapMutations(['updateApiDocsDetailData','ExtFunctionApiDocsListModule/updateApiDocsDetailData']),

            functionModuleClick(index){
                this['ExtFunctionApiDocsListModule/updateFunctionModuleShow'](index)
            },

            functionModuleItemClick(type,fmid){
                
                var httpUrl = ""

                if(type == 0){
                    httpUrl = this.$API.systemExtApiSearchApiDocsMenu + "/fm_id/" + fmid + "/type/2"
                }else{
                    httpUrl = this.$API.systemApiSearchAggregationApiDocsMenu + "/type/1"
                }

                //根据类型查询相关接口菜单
                this.$myLoading.startLoading()
                this.$http.getHttp(httpUrl,rs => {
                    this.$myLoading.endLoading()
                    console.log(rs)
                    //根据类型重组数据信息
                    var apiData = []        
                    for(var i = 0;i<rs.categoryArr.length;i++){
                        
                        var jsonData = {}
                        var nowData  = rs.categoryArr[i]

                        if(type == 0){
                            
                           jsonData.api_id   = nowData.apc_id
                           jsonData.api_name = nowData.apc_name
                           jsonData.api_fmid = nowData.apc_fmid
                           jsonData.apiList  = nowData.apiList
                           jsonData.isShow   = nowData.isShow
                           jsonData.type     = 0

                        }else{

                           jsonData.api_id   = nowData.badc_id
                           jsonData.api_name = nowData.badc_name
                           jsonData.api_fmid = nowData.badc_fmid
                           jsonData.apiList  = nowData.apiList
                           jsonData.isShow   = nowData.isShow
                           jsonData.type     = 1

                        }
                        apiData.push(jsonData)
                    }
                    this['ExtFunctionApiDocsListModule/updateApiMenuData'](apiData)
                });


            },

            apiMenuItemClick(index){
                this['ExtFunctionApiDocsListModule/updateApiDocsMenuShow'](index)
            },

            apiDocsMenuItemClick(type,item){

                var httpUrl = ""

                if(type == 0){
                    httpUrl = this.$API.systemApiSearchApiDocsDetail + "/ap_id/" + item.ap_id
                }else{
                    httpUrl = this.$API.systemApiSearchAggregationApiDocsDetail + "/bad_id/" + item.bad_id
                }


                this.$myLoading.startLoading()
                this.$http.getHttp(httpUrl,rs => {
                    this.$myLoading.endLoading()
                    
                    //新增类型属性
                    rs.apiData.type = type

                    console.log(rs)
                    this['ExtFunctionApiDocsListModule/updateApiDocsDetailData'](rs.apiData)
                });

            }

        }
    }
</script>

<style lang="stylus" scoped>    
    
    .atomicApiDocsMenuBox {
        width 200px
        height 100% 
        float left  
    }

    .apiDocsMenuBox {
        width 200px
        height 100%
        border-left 1px solid #eee
        background #fff
        float left    
    }

    .atomicApiDocsItem {
        width 200px
        height auto  
        border-bottom 1px solid #666
        cursor pointer

        &:last-child  {
            border-bottom none
        }
    }

    .atomicApiDocsMenuCategory {
        width 100%
        height 40px
        line-height 40px
        text-indent 15px
        color #fff
        background #333
    }

     .atomicApiDocsMenuContent {
        width 100%
        height auto
    }

    .atomicApiDocsMenuItem {
        width 100%
        height 40px
        line-height 40px
        text-indent 15px

        &:hover {
            background #ccc
        }
    }

    .atomicApiDocsContentBox {
        position absolute
        border-left 1px solid #eee
        left 400px
        right 0px
        top 0px
        bottom 0px
        background #fff    
        overflow auto
    }

    .apiDocTitleBox {
        width 100%
        height 40px
        background #999
        color #fff 
        line-height 40px

        i {
            margin-right 5px
            margin-left 15px
        }
    }

    .apiDocContentBox {
        width auto
        height auto   
        padding-top 10px
        padding-bottom 10px
        padding-left 15px
        margin-right 15px
        line-height 20px
    }

    .apiDocRequestBox {
        width auto
        height auto
        padding-left 15px
    }

    .noApiDocsBox {
        width 100%
        height 100%  
        position relative

        .noApiDocsText {
            width auto
            height auto
            position absolute
            top 50% 
            left 50%
            margin-top -15px
            margin-left -90px
            font-size 24px
            padding-right 10px
            color #999
        }
    }
</style>